<template>
  <div class="container mx-auto p-6 bg-gray-100 min-h-screen">
    <h1 class="text-xl font-semibold text-gray-800 mb-6">病历查询</h1>
    
    <!-- 搜索表单 -->
    <div class="bg-white p-4 rounded-lg shadow mb-6">
      <div class="flex flex-col md:flex-row gap-4">
        <div class="flex-1">
          <label class="block text-sm font-medium text-gray-700 mb-1">患者ID</label>
          <input 
            v-model="searchParams.patientId" 
            type="text" 
            class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="请输入患者ID"
          />
        </div>
        <div class="flex-1">
          <label class="block text-sm font-medium text-gray-700 mb-1">疾病类型</label>
          <select 
            v-model="searchParams.diseaseType" 
            class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">请选择疾病类型</option>
            <option v-for="type in diseaseTypes" :key="type" :value="type">{{ type }}</option>
          </select>
        </div>
      </div>
      <div class="mt-4 flex justify-end">
        <button 
          @click="searchRecords" 
          class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          查询
        </button>
      </div>
    </div>

    <!-- 病历列表 -->
    <div class="bg-white p-4 rounded-lg shadow">
      <table class="w-full text-sm text-gray-700">
        <thead class="bg-gray-50">
          <tr>
            <th class="p-2 text-left border-b border-gray-200">病历ID</th>
            <th class="p-2 text-left border-b border-gray-200">患者姓名</th>
            <th class="p-2 text-left border-b border-gray-200">疾病类型</th>
            <th class="p-2 text-left border-b border-gray-200">诊断日期</th>
            <th class="p-2 text-left border-b border-gray-200">描述</th>
            <th class="p-2 text-left border-b border-gray-200">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="record in records" :key="record.id" class="hover:bg-gray-50">
            <td class="p-2 border-b border-gray-200">{{ record.patientId }}</td>
            <td class="p-2 border-b border-gray-200">{{ record.patientName }}</td>
            <td class="p-2 border-b border-gray-200">{{ record.diseaseType }}</td>
            <td class="p-2 border-b border-gray-200">{{ record.diagnosisDate }}</td>
            <td class="p-2 border-b border-gray-200">{{ record.description }}</td>
            <td class="p-2 border-b border-gray-200">
              <button class="px-2 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 mr-2">
                查看
              </button>
              <button class="px-2 py-1 bg-green-500 text-white rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500">
                编辑
              </button>
            </td>
          </tr>
        </tbody>
      </table>
      <div v-if="records.length === 0" class="text-center text-gray-500 py-4">
        暂无病历数据
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MedicalRecordSearch',
  data() {
    return {
      searchParams: {
        patientId: '',
        diseaseType: ''
      },
      diseaseTypes: [
        '感冒',
        '高血压',
        '糖尿病',
        '心脏病',
        '哮喘'
      ],
      records: [],
      mockRecords: [
        { id: 1, patientId: 'REC20230721001', patientName: '张三', diseaseType: '感冒', diagnosisDate: '2023-07-21 10:30', description: '普通感冒，建议休息和多喝水' },
        { id: 2, patientId: 'REC20230720002', patientName: '李四', diseaseType: '高血压', diagnosisDate: '2023-07-20 14:15', description: '高血压，需要定期监测' },
        { id: 3, patientId: 'REC20230719003', patientName: '王五', diseaseType: '糖尿病', diagnosisDate: '2023-07-19 09:45', description: '二型糖尿病，建议控制饮食' }
      ]
    }
  },
  methods: {
    searchRecords() {
      this.records = this.mockRecords.filter(record => {
        const matchesPatientId = !this.searchParams.patientId || 
          record.patientId.toLowerCase().includes(this.searchParams.patientId.toLowerCase())
        const matchesDiseaseType = !this.searchParams.diseaseType || 
          record.diseaseType === this.searchParams.diseaseType
        return matchesPatientId && matchesDiseaseType
      })
    }
  }
}
</script>

<style>
.container {
  max-width: 1200px;
}

input, select {
  height: 2.5rem;
  padding-left: 0.75rem;
}

button {
  transition: background-color 0.2s ease;
}

table {
  border-collapse: collapse;
}

th, td {
  vertical-align: middle;
}

@media (max-width: 640px) {
  .flex {
    flex-direction: column;
  }
  .flex-1 {
    width: 100%;
  }
}
</style>